import React, { Component } from "react";
import { Layout, Tabs, Icon, Spin } from "antd";
import Loadable from "react-loadable";
import { useTranslation } from 'react-i18next';

interface Props {
  activeTab: string;
  tabs: any[];
  onTabClick: Function;
  closeTab: Function;
}

function TabComponent(props: any) {
  const { t } = useTranslation();
  const LoadableComponent = Loadable({
    loader: () => import(`../tabComponents/${props.name}`),
    loading() {
      return <div className="loading-component"><Spin size="large" tip={t('loading')} /></div>;
    }
  });
  return <LoadableComponent />;
}

class DashboardContent extends Component<Props> {
  constructor(props: Readonly<Props>) {
    super(props);
  }

  render() {
    return (
      <Layout.Content className="dashboard-content">
        <Tabs
          activeKey={this.props.activeTab}
          onTabClick={this.props.onTabClick}
        >
          {this.props.tabs.map(tab => {
            return (
              <Tabs.TabPane
                tab={
                  <span>
                    <Icon type={tab.icon ? tab.icon : 'file'} />
                    {tab.label}
                    <Icon
                      type="close"
                      className="tab-close"
                      onClick={(e: any) => {
                        e.stopPropagation();
                        this.props.closeTab(tab.id);
                      }}
                    />
                  </span>
                }
                key={tab.id}
                className="tab-content"
              >
                <TabComponent name={tab.component} />
              </Tabs.TabPane>
            );
          })}
        </Tabs>
      </Layout.Content>
    );
  }
}

export default DashboardContent;
